/** card common style */
.card-container {
  position: relative;
  
  &.img {
    padding: 0;

    .card-cover {
      position: relative;
      overflow: hidden;

      > img {
        display: block;
        width: 100%;
        max-height: 380px;
        object-fit: cover;
      }
    }

    .card-text {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: var(--content-large-padding);
    }
  }

  .card-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: #ff5858;
    background-image: linear-gradient(1deg, #f857a6, #ff5858);

    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.3;
      background-image: linear-gradient(234deg, #394245 0%, #000 100%);
    }
  }

  .card-text {
    line-height: var(--font-base-lh);
    color: var(--theme-text-light);
    position: relative;
    transition: transitions(color, 0.3s);

    .card-text--title {
      font-size: var(--font-stress-size);
      font-weight: bolder;
    }

    .card-text--row {
      font-size: var(--font-common-size);
      margin-top: var(--layout-padding-x);
    }

    .card-text--tag {
      display: flex;
      flex-wrap: wrap;
      margin-top: 18px;
      margin-left: -8px;
      margin-right: -8px;
  
      a {
        border-radius: 20px;
        padding: 4px 8px;
        transition: color 0.3s ease, background-color 0.3s ease;
        &::before {
          content: "#";
          margin-right: 4px;
        }
  
        &:hover {
          color: var(--theme-text-active);
          background-color: #fff;
        }
      }
    }
  }
}

/** section swiper style */
.section-swiper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;

  &::-webkit-scrollbar {
    display: none;
  }

  .swiper-item {
    padding: var(--layout-padding-x);
    scroll-snap-align: center;
    @include mq-pc {
      width: 25%;
      flex: 0 0 25%;
      min-width: 25%;
    }
    @include mq-mb {
      width: 50%;
      flex: 1 1 50%;
      min-width: 50%;
    }
  }
}

/** article lsit style */
.article-list {
  display: flex;
  flex-wrap: wrap;

  .article-card {
    height: 100%;
  }

  .article-item {
    padding: var(--layout-padding-x);
    max-width: 100%;
    flex: 1 0 auto;

    @include mq-pc {
      min-width: 25%;
    }

    @include mq-mb {
      width: 100%;
      min-width: 230px;
    }

    &:nth-child(1n) .article-card .card-cover {
      background-color: #e77842;
      background-image: linear-gradient(45deg, #e77842, #f7c068);
    }

    &:nth-child(2n) .article-card .card-cover {
      background-image: #ff5858;
      background-image: linear-gradient(1deg, #f857a6, #ff5858);
    }

    &:nth-child(3n) .article-card .card-cover {
      background-color: #b53cff;
      background-image: linear-gradient(20deg, #b53cff, #f952ff);
    }

    &:nth-child(4n) .article-card .card-cover {
      background-color: #6bd0ff;
      background-image: linear-gradient(40deg, #327ae7, #6bd0ff);
    }

    &:nth-child(5n) .article-card .card-cover {
      background-color: #ffd62e;
      background-image: linear-gradient(40deg, #ffb040, #ffd62e);
    }
  }
}

/** article paging style */
.article-paging {
  display: flex;
  flex-wrap: wrap;

  .post-paging--item {
    margin: var(--layout-padding-x);
    color: var(--theme-text-light);
    text-align: center;
    flex: 1;
    transition: transitions(color, 0.3s);
  }
}